<template>
  <body class="pinquiry">
    <i class="el-icon-back back_btn" @click="back()"></i>
    <div class="big-box">
      <div class="transerve"></div>
      <div class="content-box">
        <div class="react-box">
          <div class="pic-box"></div>
          <div class="react-content">{{ answer }}</div>
        </div>
        <div class="send-box">
          <el-input
            style="width: 82%; margin-left: 80px"
            placeholder="请输入你要提问的内容"
            v-model="question"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          <el-button
            type="primary"
            style="margin-left: 40px"
            @click="sendMsg"
            :disabled="isSending"
            >发送</el-button
          >
        </div>
      </div>
      <div class="transerve"></div>
    </div>
  </body>
</template>
<script>
import { askGpt } from '../api/gpt'
export default {
  name: 'inquiry',
  data() {
    return {
      isSending: false,
      question: '',
      answer: '我是您的宠物医院助手-哆啦B梦，请问有什么可以帮您？',
    }
  },
  methods: {
    back() {
      this.$router.push({ path: '/home' })
    },
    sendMsg() {
      if (this.question == '') {
        this.$message.error('请输入内容！')
      } else {
        this.isSending = true
        let data = this.question
        this.answer = '哆啦B梦已经收到您的提问，正在努力思考中....'
        askGpt({ data })
          .then((res) => {
            console.log(res)
            if (res.status == 200) {
              this.answer = res.data
            } else {
              this.$message.error(res.message)
              this.answer = '哆啦B梦不会这个问题wwww,请您再问问别的问题'
            }
            this.isSending = false
          })
          .catch(function (error) {
            console.error(error)
            this.isSending = false
          })
      }
    },
  },
}
</script>
<style scoped>
.pinquiry {
  background-image: url('../assets/测试的背景.jpg');
  background-size: 100% 100%;
}
.back_btn {
  float: left;
  font-size: 35px;
}
.big-box {
  height: 90%;
  width: 100%;
  flex-direction: row;
  display: flex;
}
.transerve {
  width: 10%;
}
.content-box {
  width: 80%;
  background-color: white;
  border-radius: 25px;
  padding: 25px 25px;
}
.react-box {
  height: 80%;
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.pic-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-image: url('../assets/images/robotcat.jpeg');
  background-size: 100% 100%;
  margin-right: 20px;
}
.react-content {
  height: 100%;
  width: 100%;
  background-color: rgb(225, 236, 255);
  border-radius: 25px;
  padding: 20px 20px;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
</style>
